<template>
<div class="container">
    <div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="码表分类" prop="codeType">
                <el-select v-model="classify" clearable placeholder="码表分类">
                  <el-option
                    v-for="item in classifyOptions"
                    :key="item.codeType"
                    :label="item.codeTypeName"
                    :value="item.codeType">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="码表状态" prop="status">
                <el-select v-model="appendlist.status" clearable placeholder="码表分类">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="代码类别" prop="codeType">
                  <el-input v-model="appendlist.codeType" placeholder="代码类别" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类别名称" prop="codeTypeName">
                  <el-input v-model="appendlist.codeTypeName" placeholder="类别名称" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="代码名称" prop="codeName">
                  <el-input v-model="appendlist.codeName" placeholder="代码名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="代码值" prop="codeValue">
                  <el-input v-model="appendlist.codeValue" placeholder="代码值"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="排序号" prop="orderNo">
                  <el-input v-model="appendlist.orderNo" placeholder="排序号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">保 存</el-button>
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
      </div>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      classify: '',
      classifyOptions: [],
      appendlist: {
        codeType: '',
        codeValue: '',
        codeTypeName: '',
        codeName: '',
        orderNo: '',
        status: '0'
      },
      statusOptions: [
        {
          value: '0',
          label: '未禁用'
        },
        {
          value: '1',
          label: '已禁用'
        }
      ],
      appendrules: {
        codeType: [
          { message: '代码类别不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        codeValue: [
          { message: '代码值不能为空', required: true, trigger: 'blur' },
          { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
        ],
        status: [
          { message: '状态不能为空', required: true, trigger: 'blur' }
        ],
        codeTypeName: [
          { required: false, trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        codeName: [
          { required: false, trigger: 'blur' },
          { min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
        ],
        orderNo: [
          { required: false, trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ]
      },
      classifylist: {
        'fields': [
          'codeType',
          'codeTypeName'
        ]
      }
    }
  },
  created() {
    // 组件创建完后获取数据，
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route.name': ['fetchData'],
    classify(n, o) {
      let obj = {}
      obj = this.classifyOptions.find((item) => {
        return item.codeType === n
      })
      this.appendlist.codeType = obj.codeType
      this.appendlist.codeTypeName = obj.codeTypeName
    }
  },
  methods: {
    fetchData() {
      this.$store.dispatch('CodeCompositeSelect', this.classifylist).then(res => {
        this.classifyOptions = res.data.records
      }).catch((err) => {
        console.log(err)
      })
    },
    appendData() {
      this.$store.dispatch('CodeInsert', this.appendlist).then(res => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.$emit('changeCloseDialog')
      }).catch((err) => {
        console.log(err)
      })
    },
    createSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.appendData()
        } else {
          this.$message({
            type: 'danger',
            message: '添加失败!'
          })
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelSubmit() {
      this.$emit('changeCloseDialog')
    }
  }
}
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
